<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Language" content="en">

    <meta name="author" content="刘铭洋">
    <meta name="description" content="Just define the image URL in the content’s front matter, the featured image will be displayed as the background.
For example:
--- images: - https://picsum.photos/1024/768/?random --- This is an array, you can set multiple urls, only the first url will be used. These images is also used in Twitter Cards and the Open Graph metadata.">
    <meta name="keywords" content="blog,developer,personal">

    <meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://picsum.photos/1024/768/?random"/>

<meta name="twitter:title" content="Post With Featured Image"/>
<meta name="twitter:description" content="Just define the image URL in the content’s front matter, the featured image will be displayed as the background.
For example:
--- images: - https://picsum.photos/1024/768/?random --- This is an array, you can set multiple urls, only the first url will be used. These images is also used in Twitter Cards and the Open Graph metadata."/>

    <meta property="og:title" content="Post With Featured Image" />
<meta property="og:description" content="Just define the image URL in the content’s front matter, the featured image will be displayed as the background.
For example:
--- images: - https://picsum.photos/1024/768/?random --- This is an array, you can set multiple urls, only the first url will be used. These images is also used in Twitter Cards and the Open Graph metadata." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://nagaseren-a.gitee.io/posts/post-with-featured-image/" />
<meta property="og:image" content="https://picsum.photos/1024/768/?random" />
<meta property="article:published_time" content="2018-10-01T16:15:09+08:00" />
<meta property="article:modified_time" content="2018-10-01T16:15:09+08:00" />


    <title>
  Post With Featured Image · 刘铭洋
</title>

    
      <link rel="canonical" href="https://nagaseren-a.gitee.io/posts/post-with-featured-image/">
    

    <link href="https://fonts.googleapis.com/css?family=Lato:400,700%7CMerriweather:300,700%7CSource+Code+Pro:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />

    
      
      
      <link rel="stylesheet" href="/css/coder.min.f01c647a0d25b40da992a37c3376291185eed8a50ced8c26cc2c0bcfe38c97df.css" integrity="sha256-8Bxkeg0ltA2pkqN8M3YpEYXu2KUM7YwmzCwLz&#43;OMl98=" crossorigin="anonymous" media="screen" />
    

    

    
      
        
        
        <link rel="stylesheet" href="/css/coder-dark.min.126ad3988d46bdae6217a11105b53c9662bca05f39d42d3c0fb366919d334620.css" integrity="sha256-EmrTmI1Gva5iF6ERBbU8lmK8oF851C08D7NmkZ0zRiA=" crossorigin="anonymous" media="screen" />
      
    

    

    

    <link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">

    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">

    
      <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
    

    <meta name="generator" content="Hugo 0.78.2" />
  </head>

  
  
    
  
  <body class="colorscheme-auto"
        onload=" twemoji.parse(document.body); "
  >
    
<div class="float-container">
    <a id="dark-mode-toggle" class="colorscheme-toggle">
        <i class="fa fa-adjust fa-fw" aria-hidden="true"></i>
    </a>
</div>


    <main class="wrapper">
      <nav class="navigation">
  <section class="container">
    <a class="navigation-title" href="/">
      刘铭洋
    </a>
    
      <input type="checkbox" id="menu-toggle" />
      <label class="menu-button float-right" for="menu-toggle">
        <i class="fa fa-bars fa-fw" aria-hidden="true"></i>
      </label>
      <ul class="navigation-list">
        
          
            <li class="navigation-item">
              <a class="navigation-link" href="/about/">About</a>
            </li>
          
            <li class="navigation-item">
              <a class="navigation-link" href="/posts/">Blog</a>
            </li>
          
            <li class="navigation-item">
              <a class="navigation-link" href="/projects/">Projects</a>
            </li>
          
            <li class="navigation-item">
              <a class="navigation-link" href="/contact/">Contact me</a>
            </li>
          
        
        
          
          
          
            
          
            
              
                <li class="navigation-item menu-separator">
                  <span>|</span>
                </li>
                
              
              <li class="navigation-item">
                <a href="https://nagaseren-a.gitee.io/zh_cn/">Chinese</a>
              </li>
            
          
        
      </ul>
    
  </section>
</nav>


      <div class="content">
        
  <section class="container post">
    <article>
      <header>
        <div class="post-title">
          <h1 class="title">Post With Featured Image</h1>
        </div>
        <div class="post-meta">
          <div class="date">
            <span class="posted-on">
              <i class="fa fa-calendar" aria-hidden="true"></i>
              <time datetime='2018-10-01T16:15:09&#43;08:00'>
                October 1, 2018
              </time>
            </span>
            <span class="reading-time">
              <i class="fa fa-clock-o" aria-hidden="true"></i>
              One-minute read
            </span>
          </div>
          
          
          <div class="tags">
  <i class="fa fa-tag" aria-hidden="true"></i>
    <a href="/tags/demo/">Demo</a>
      <span class="separator">•</span>
    <a href="/tags/image/">Image</a></div>

        </div>
      </header>

      <div>
        
        <p>Just define the image URL in the content’s front matter, the featured image will be displayed as the background.</p>
<p>For example:</p>
<div class="highlight"><pre style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yaml" data-lang="yaml">---
<span style="font-weight:bold">images</span>:
  - https://picsum.photos/1024/768/?random
---
</code></pre></div><p>This is an array, you can set multiple urls, only the first url will be used. These images is also used in <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html">Twitter Cards</a> and the <a href="http://ogp.me/">Open Graph</a> metadata.</p>

      </div>


      <footer>
        


        <div id="disqus_thread"></div>
<script type="application/javascript">
    var disqus_config = function () {
    
    
    
    };
    (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
            document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
            return;
        }
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "yourdiscussshortname" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
        
        
      </footer>
    </article>

    
  </section>

      </div>

      
  <footer class="footer">
    <section class="container">
      
        <p>Enter a text here.</p>
      
      
        ©
        
          2019 -
        
        2020
         刘铭洋 
      
      
         · 
        Powered by <a href="https://gohugo.io/">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/">Coder</a>.
      
      
        
      
    </section>
  </footer>


    </main>

    
      
        
        <script src="/js/dark-mode.min.0213e1773e6d1c5a644f847c67a6f8abac49a3776e2976f6008038af8c5b76a1.js"></script>
      
    

    

    

    <script>
(function(f, a, t, h, o, m){
	a[h]=a[h]||function(){
		(a[h].q=a[h].q||[]).push(arguments)
	};
	o=f.createElement('script'),
	m=f.getElementsByTagName('script')[0];
	o.async=1; o.src=t; o.id='fathom-script';
	m.parentNode.insertBefore(o,m)
})(document, window, '//analytics.example.com/tracker.js', 'fathom');
fathom('set', 'siteId', 'ABCDE');
fathom('trackPageview');
</script>


    <script async defer data-domain="example.com" src="https://analytics.example.com/js/plausible.js"></script>


    <script data-goatcounter="https://code.goatcounter.com/count"
        async src="//gc.zgo.at/count.js"></script>

  </body>

</html>
